<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DEMO</title>
    <!--CSS-->
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <style>
      body {
        height: 200vh;
        margin: 0;
      }
      .wrapper {
        display: flex;
        justify-content: center;
      }
      .container {
        min-height: 95vh;
        height: 95vh;
        margin: 0.3em;
        border: 1px solid grey;
      }
      .block {
        width: 8em;
        height: 8em;
        margin: 0.8em;
        border: 1px dashed #afafaf;
      }
      .block.is-sticky {
        border-color: red;
      }
      .block.is-big {
        height: 10em;
      }
      .block.is-small {
        height: 6em;
      }
    </style>
  </head>
  <body>
    <div class="htmleaf-container">
      <div class="htmleaf-header starlight">
        <h1>
          头部标题
          <span>头部副标题</span>
        </h1>
        <div class="htmleaf-links">
          <a
            class="htmleaf-icon icon-htmleaf-home-outline"
            href="/index.html"
            title="页面1"
            target="_blank"
            ><span> home1 </span></a
          >
          <a
            class="htmleaf-icon icon-htmleaf-arrow-forward-outline"
            href="/index2.html"
            title="页面2"
            target="_blank"
            ><span> home2</span></a
          >
        </div>
        <div class="htmleaf-demo center">
          <a href="index.html">页面1</a>
          <a href="index2.html">页面2</a>
          <a href="index3.html" class="current">多内容展示</a>
        </div>
      </div>
      <div class="wrapper">
        <div id="container1" class="container">
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/1.jpg" />
          </div>
          <div class="block is-sticky">
            <img style="width: 100%; min-height: 100%" src="img/2.jpg" />
          </div>
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/3.jpg" />
          </div>
        </div>
        <div id="container2" class="container">
          <div class="block is-big">
            <img style="width: 100%; min-height: 100%" src="img/4.jpg" />
          </div>
          <div class="block is-small">
            <img style="width: 100%; min-height: 100%" src="img/5.jpg" />
          </div>
          <div class="block is-sticky">
            <img style="width: 100%; min-height: 100%" src="img/6.jpg" />
          </div>
        </div>
        <div id="container3" class="container">
          <div class="block is-sticky">
            <img style="width: 100%; min-height: 100%" src="img/7.jpg" />
          </div>
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/8.jpg" />
          </div>
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/9.jpg" />
          </div>
        </div>
        <div id="container4" class="container">
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/10.jpg" />
          </div>
          <div class="block is-sticky is-big">
            <img style="width: 100%; min-height: 100%" src="img/11.jpg" />
          </div>
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/12.png" />
          </div>
        </div>
        <!--  第五列图片，按照这个格式可以添加一列瀑布流式内容展示 
            <div id="container5" class="container">
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/10.jpg" />
          </div>
          <div class="block is-sticky is-big">
            <img style="width: 100%; min-height: 100%" src="img/11.jpg" />
          </div>
          <div class="block">
            <img style="width: 100%; min-height: 100%" src="img/12.png" />
          </div>
        </div> -->
      </div>
      <button class="gototop"><span>返回顶部</span></button>
    </div>

    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/starlight.js"></script>
    <script src="js/sticksy.js"></script>
    <script src="js/jquery.gototop.min.js"></script>
    <script>
      Sticksy.initializeAll(".is-sticky");
      $(function () {
        // $(".gototop").gototop();
        $(".gototop").gototop({
          position: 0,
          duration: 1250,
          visibleAt: 300,
          classname: "isvisible",
        });
      });
    </script>
  </body>
</html>
